<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<!--创建角色模态框-->
<div class="modal fade" id="modal-create-role">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">角色信息</h4>
            </div>
            <div class="modal-body">
                <form id="roleForm" class="form-horizontal">
                    <input type="hidden" id="id" name="id">
                    <input type="hidden" id="pid" name="pid">
                    <div class="col-md-12">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">角色名</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="roleName" placeholder="请输入角色名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">角色码</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="roleCode" placeholder="请输入角色码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">排序</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" name="orderNo" placeholder="排序">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">权限</label>
                                <div class="col-sm-9">
                                    <div id="permissionTree" class="ztree"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-role">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1>
        角色列表
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>角色</label>
                                    <input type="text" name="roleName" class="form-control" placeholder="请输入角色名称或角色编码">
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <!--<i class="fa fa-search"></i>-->
                                    <span class="Bold">搜索</span>
                                </button>
                                <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="openCreateRoleModal()">
                                    <!--<i class="fa fa-plus"></i>-->
                                    <span class="Bold">添加</span>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-tree-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    var table;
    var tree;

    /**
     * 打开角色模态框
     */
    function openCreateRoleModal(pid) {
        if (pid) {
            $("#pid").val(pid);
        } else {
            $("#pid").val('');
        }
        tree = js.tree.init({
            id: "permissionTree",
            async: {
                url: ctx + "sys/role/permissions",
            },
            data: {
                key: {
                    name: "description",                                                   // 节点数据保存节点名称的属性名称
                }
            }
        });
        js.modal.open("modal-create-role");
    }

    /**
     * 打开角色模态框, 回显数据
     */
    function openEditRoleModal(id) {
        js.post({
            url: ctx + "sys/role/id",
            data: {
                id: id
            },
            success: function (result) {
                $("#roleForm").fillData(result);
                tree = js.tree.init({
                    id: "permissionTree",
                    async: {
                        url: ctx + "sys/role/permissions/" + id
                    },
                    data: {
                        key: {
                            name: "description"                                                   // 节点数据保存节点名称的属性名称
                        }
                    }
                });
                js.modal.open("modal-create-role");
                js.modal.closeLoading();
                setTimeout(function () {
                    js.validate.validing("roleForm");
                }, 500);
            }
        })
    }

    /**
     * 删除角色
     */
    function delRole(id) {
        js.modal.confirm("删除此角色将同时删除此角色包含的子角色，确认删除此角色吗？", function (result) {
            js.post({
                url: ctx + "sys/role/del",
                data: {
                    id: id,
                    status: 0
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.treeTable.refresh(table);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    $(function () {

        /**
         * 加载角色表格
         */
        table = js.treeTable.init({
            url: ctx + "sys/role/list",
            columns: [
                { title: "角色名称", field: 'roleName', align: "left", width: '20%',
                    formatter: function (value, row, index) {
                        return '<i class="fa fa-map-o"></i> <span class="nav-label">' + value + '</span>';
                    }
                },
                { title: "角色编码", field: 'roleCode'},
                {title: '排序', field: 'orderNo'},
                {
                    title: "操作",
                    width: '250',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="openCreateRoleModal(' + row.id + ')"> 新增</a> ');
                        actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openEditRoleModal(' + row.id + ')"> 编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delRole(' + row.id + ')"> 删除</a>');
                        return actions.join('');
                    }
                }
            ]

        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.treeTable.search(table);
        });

        /**
         * 验证
         */
        js.validate.init("roleForm", {
            fields: {
                roleName: {
                    validators: {
                        notEmpty: {message: '请输入角色名'},
                        remote: {
                            url: ctx + "sys/role/checkUnique",
                            message: '角色已存在',
                            delay: 200,
                            type: 'POST',
                            data: {
                                id: function () {
                                    return $("#id").val();
                                }
                            }
                        }
                    }
                }
            }
        });

        /**
         * 创建角色
         */
        $("#btn-create-role").click(function () {
            var url = ctx + "sys/role/save";
            if ($("#id").val()) {
                url = ctx + "sys/role/update";
            }
            if (js.validate.isValid("roleForm")) {
                js.post({
                    url: url,
                    data: $("#roleForm").serialize() + "&permissionIds=" + js.tree.getCheckedNodes(tree),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.treeTable.refresh(table);
                            js.modal.hide("modal-create-role");
                        } else {
                            js.modal.warning(result.msg);
                        }
                        js.modal.closeLoading();
                    }
                })
            }
        });

        /**
         * 模态框隐藏事件， 重置表单，重置验证
         */
        js.modal.hideEvent("modal-create-role", function () {
            js.validate.reset("roleForm");
            js.reset("roleForm");
        })
    });

</script>
</body>
</html>
